import React, { useState, useEffect } from 'react'
import './Css/Real_time_data.css'
import { getgoodsales } from '../../../../request/api'
export default function Product_sales_ranking(props) {
    useEffect(() => {
        Getgoodsales()
    }, [])
    const [goodsales, setgoodsales] = useState([])
    const Getgoodsales = async () => {
        const res = await getgoodsales({})
        setgoodsales(res.data)
    }
    return (
        <div className='Product_sales_ranking'>
            <div className='Real_time_data_title'>
                {props.title}
                <p >
                    <span style={{ fontSize: '0.3rem' }}>今日 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>本周 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>本月 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>全年 &nbsp; &nbsp;</span>
                    &nbsp; &nbsp;
                </p>
            </div>
            <div>
                {goodsales.map((item,index) => {
                    return <p className='Product_sales_ranking_p'>
                        <span style={{ marginLeft: '0.3rem' }}>
                            <div className='circle'>{index+1}</div>
                            {item.name}
                        </span>
                        <span style={{ marginRight: '0.3rem' }}>{item.sell}</span>
                    </p>
                })}
            </div>
        </div>
    )
}
